<template>
	<view class="main">
		<view class="top">
			<view class="search">
				<image src="../../static/search.png" mode=""></image>
				<input type="text" v-model="keyWords" value="" placeholder="类别搜索" @confirm="serviceCsList"></input>
				<view class="btn" @click="serviceCsList">
					搜索
				</view>
			</view>
		</view>
		<view class="content">
			<view class="cont-top">
				<view :class="isActive == true ? 'btn1' : '' + 'btn2'" @click="choose(1)">
					按处室
				</view>
				<view :class="isActive == true ? 'btn2' : '' + 'btn1'" @click="choose(2)">
					按分类
				</view>
			</view>
			<view class="con-bottom" v-if="navIndex==1">
				<view class="list">
					<text class="item" v-for="(item,index) in boxList1" :key="index" @click="getoDe(item)">
						{{item.name}}
					</text>
				</view>
			</view>
			<view class="con-bottom" v-if="navIndex==2">
				<view class="list">
					<text class="item" v-for="(item,index) in boxList2" :key="index" @click="gettoDet(item)">
						{{item.name}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true,
				navIndex: 1,
				type: '',
				folderTreeLevel: '',
				pageSize: '',
				pageNum: '',
				keyWords: '',
				boxList1: [],
				boxList2: [{
						index: 'XK',
						name: '行政许可'
					},
					{
						index: 'QR',
						name: '行政确认'
					},
					{
						index: 'GG',
						name: '公共服务'
					},
					{
						index: 'QT',
						name: '其他行政权力'
					},
					{
						index: 'cf',
						name: '行政处罚'
					},
					{
						index: 'QZ',
						name: '行政强制'
					},
					{
						index: 'JC',
						name: '行政监督检查'
					},
					{
						index: 'ZS',
						name: '行政征收'
					},
					{
						index: 'JL',
						name: '行政奖励'
					}
				]
			}
		},
		onLoad(option) {
			if (option.type) {
				this.navIndex = option.type;
				this.isActive = !this.isActive;
			}
			this.serviceCsList()
		},
		methods: {
			// 处室和分类切换
			choose(index) {
				// 是否选中
				this.isActive = !this.isActive;
				// 展示内容索引
				this.navIndex = index
			},
			// 处室选项跳转
			getoDe(item) {
				this.$gopage('/pages/bright/administrativet?title=' + item.name + '&code=' + item.code)
			},
			// 分类选项跳转
			gettoDet(item) {
				this.$gopage('/pages/bright/administrative?&type=' + item.index + '&title=' + item.name)
			},
			// 处室服务列表
			serviceCsList() {
				this.$ajax({
					url: '/api/app/serviceCsList?serviceObject=1',
					noErrorMsg: true,
					method: 'get',
					data: {
						keyWord: this.keyWords
					},
				}).then(res => {
					this.boxList1 = res.data;
					console.log(this.keyWords)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			height: 108rpx;
			border-bottom: 1rpx solid #eeeeee;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.search {
				box-sizing: border-box;
				padding: 20rpx auto;
				background-color: #eeeeee;
				height: 74rpx;
				margin: 0 auto;
				border-radius: 40rpx;
				display: flex;
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
				}

				input {
					width: 420rpx;
					height: 50rpx;
					font-size: 24rpx;
					padding-right: 30rpx;
				}

				.btn {
					font-size: 28rpx;
					letter-spacing: 0;
					color: #ffffff;
					width: 140rpx;
					height: 74rpx;
					background-color: #5b96ff;
					border-radius: 0rpx 40rpx 40rpx 0rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.content {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.cont-top {
				display: flex;
				height: 113rpx;
				background-color: #fff;
				align-items: center;

				.btn1 {
					display: flex;
					flex-direction: column;
					font-size: 36rpx;
					letter-spacing: 0rpx;
					color: #333333;
					font-weight: 600;
					margin-left: 60rpx;
					position: relative;
					&::after {
						content: '';
						background: url(../../static/banyuan.png) no-repeat;
						background-size: cover;
						height: 10rpx;
						width: 40rpx;
						position: absolute;
						bottom: -16rpx;
						left: 0;
						right: 0;
						margin: auto auto;
					}
				}

				.btn2 {
					margin-left: 60rpx;
					font-size: 36rpx;
					letter-spacing: 0rpx;
					color: #333333;
					position: relative;
				}

			}

			.con-bottom {
				flex: 1;
				overflow-y: scroll;
				background-color: #f5f5f5;
				padding: 0 30rpx;
				padding-bottom: 30rpx;

				.list {
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 203rpx;
						height: 62rpx;
						border-radius: 5rpx;
						border: solid 1rpx #5b96ff;
						margin-top: 40rpx;
						line-height: 62rpx;
						text-align: center;
						color: #5b96ff;
						// margin-right: 20rpx;	
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						margin-right: 30rpx;
						&:nth-child(3n){
							margin-right: 0;
						}
					}
				}

			}
		}
	}
</style>
